<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="选择课程" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-select
        v-decorator="['courseId', {rules: [{required: true, message: '请选择课程'}]}]"
        placeholder="请选择需要补课的课程"
        @change="handleCourseChange"
      >
        <a-select-option v-for="course in courseList" :key="course.id" :value="course.id">
          {{ course.name }} ({{ course.time }} {{ course.room }})
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="原停课信息" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <div v-if="selectedCourse">
        <p>原时间: {{ selectedCourse.time }}</p>
        <p>原教室: {{ selectedCourse.room }}</p>
        <p>班级: {{ selectedCourse.classes.join(', ') }}</p>
      </div>
      <div v-else>请先选择课程</div>
    </a-form-item>

    <a-form-item label="补课日期" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-date-picker
        v-decorator="['makeupDate', {rules: [{required: true, message: '请选择补课日期'}]}]"
        style="width: 100%"
        placeholder="选择补课日期"
      />
    </a-form-item>

    <a-form-item label="补课时间" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-select
        v-decorator="['makeupTime', {rules: [{required: true, message: '请选择补课时间'}]}]"
        placeholder="请选择补课时间"
      >
        <a-select-option v-for="time in timeOptions" :key="time" :value="time">
          {{ time }}
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="补课教室" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-select
        v-decorator="['makeupRoom', {rules: [{required: true, message: '请选择补课教室'}]}]"
        placeholder="请选择补课教室"
      >
        <a-select-option v-for="room in roomList" :key="room.id" :value="room.id">
          {{ room.name }} (容量: {{ room.capacity }}人)
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="补课原因" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-cascader
        v-decorator="['reason', {rules: [{required: true, message: '请选择补课原因'}]}]"
        :options="reasonOptions"
        placeholder="请选择补课原因"
      />
    </a-form-item>

    <a-form-item label="详细说明" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-textarea
        v-decorator="['description', {rules: [{required: true, message: '请输入详细说明'}]}]"
        placeholder="请详细说明补课原因"
        :rows="4"
      />
    </a-form-item>

    <a-form-item :wrapperCol="{span: 16, offset: 5}">
      <a-button type="primary" html-type="submit">提交申请</a-button>
      <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      courseList: [
        { id: '1', name: '高等数学（上）	', time: '周一 1-2节', room: 'bj007', classes: ['数学2101', '数学2102'] },
        { id: '2', name: 'PLC与工业控制技术', time: '周二 3-4节', room: 'B205', classes: ['英语2101', '英语2102'] },
        { id: '3', name: '数据结构', time: '周三 5-6节', room: 'C302', classes: ['计算机2101'] }
      ],
      selectedCourse: null,
      timeOptions: ['1-2节', '3-4节', '5-6节', '7-8节', '9-10节'],
      roomList: [
        { id: '1', name: 'bj007', capacity: 60 },
        { id: '2', name: 'B205', capacity: 80 },
        { id: '3', name: 'C302', capacity: 100 }
      ],
      reasonOptions: [
        {
          value: 'teacher',
          label: '教师原因',
          children: [
            { value: 'sick', label: '病假补课' },
            { value: 'personal', label: '事假补课' }
          ]
        },
        {
          value: 'school',
          label: '学校原因',
          children: [
            { value: 'activity', label: '活动调整补课' },
            { value: 'holiday', label: '节假日调整补课' }
          ]
        }
      ]
    }
  },
  methods: {
    handleCourseChange(value) {
      this.selectedCourse = this.courseList.find(course => course.id === value)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('补课申请表单值: ', values)
          this.$emit('submit', {
            ...values,
            course: this.selectedCourse
          })
          this.form.resetFields()
          this.selectedCourse = null
        }
      })
    },
    handleReset() {
      this.form.resetFields()
      this.selectedCourse = null
    }
  }
}
</script>